import {Avatar, Card, Descriptions, Image, Modal, Tabs} from 'antd';
import React, {useEffect, useState} from 'react';
import {PageContainer} from '@ant-design/pro-layout';
import {isSuccess} from "@/utils/utils";
import {DesignerManager} from "@/services/api-functions";
import {SYS_ENUMS} from "@/utils/constants";

const WorkDetail: React.FC<any> = ({match: {params: {id}}}) => {

  const [record, setRecord] = useState<any>(undefined)
  const [currentRow, setCurrentRow] = useState<any>();
  const [preview, setPreview] = useState<boolean>(false);

  // @ts-ignore
  useEffect( () => {
    if(id){
      DesignerManager.customizeDetail(id).then(({code, data}) => {
        if (isSuccess(code)) {
          setRecord(data)
        }
      })
    }
  }, [id])

  return (
    <PageContainer>
      <Modal visible={preview} onCancel={() => {
        setPreview(false);
        setCurrentRow(undefined)
      }}>
        <Image src={currentRow?.backgroundUrl}/>
      </Modal>
      <Card bordered={false}>
        <Tabs destroyInactiveTabPane={true}>
          <Tabs.TabPane forceRender tab='设计师信息' key="DESIGNER_BASIC_INFO">
            <Descriptions title="设计师信息" style={{marginBottom: 32}}>
              <Descriptions.Item label="设计师">{record?.nickName}</Descriptions.Item>
              <Descriptions.Item label="手机号">{record?.phone}</Descriptions.Item>
              <Descriptions.Item label="地区">{record?.regionName ?? '-'}</Descriptions.Item>
              <Descriptions.Item label="等级">{record?.customizeLevel?SYS_ENUMS.LEVEL[record?.customizeLevel].text:'-'}</Descriptions.Item>
              <Descriptions.Item label="接单状态">{record?.designerStatus?SYS_ENUMS.DESIGNER_STATUS[record?.designerStatus].text:'-'}</Descriptions.Item>
              {/*<Descriptions.Item label="在线状态">{record?.designerStatus}</Descriptions.Item>*/}
              <Descriptions.Item label="接单总收入"><span style={{color:'red'}}>{record?.totalIncome??0.00}</span></Descriptions.Item>
              <Descriptions.Item label="服务甲方">{record?.partyNum??0}</Descriptions.Item>
              <Descriptions.Item label="接单总数">{record?.orderNum??0}</Descriptions.Item>
              <Descriptions.Item label="服务订单数">{record?.partyNum??0}</Descriptions.Item>
              <Descriptions.Item label="需求订单数">{record?.demandOrderNum??0}</Descriptions.Item>
              <Descriptions.Item label="未成交订单数">{record?.serverOrderNum??0}</Descriptions.Item>
              <Descriptions.Item label="申请接单次数">{record?.acceptNum??0}</Descriptions.Item>
              <Descriptions.Item label="服务评分">{record?.serverScore??'-'}</Descriptions.Item>
              <Descriptions.Item label="评价数">{record?.serverTimes??0}</Descriptions.Item>
              <Descriptions.Item label="待接单">{record?.waitReceive??0}</Descriptions.Item>
              <Descriptions.Item label="设计中">{record?.designing??0}</Descriptions.Item>
              <Descriptions.Item label="待交付">{record?.waitReceive??0}</Descriptions.Item>
              <Descriptions.Item label="案例数量">{record?.caseNum??0}</Descriptions.Item>
              <Descriptions.Item label="最后接单时间">{record?.lastLogin??'-'}</Descriptions.Item>
              <Descriptions.Item label="注册时间">{record?.gmtCreate??'-'}</Descriptions.Item>
            </Descriptions>
            <Descriptions title="定制服务信息" style={{marginBottom: 32}}>
              <Descriptions.Item label="服务名称">{record?.serverName??'-'}</Descriptions.Item>
              <Descriptions.Item label="主页标签">{record?.labels?'是':'否'}</Descriptions.Item>
              <Descriptions.Item label="今日访客">{record?.todayVisitor??0}</Descriptions.Item>
              <Descriptions.Item label="基础服务"><span style={{color:'red'}}>{record?.priceBase??'-'}</span></Descriptions.Item>
              <Descriptions.Item label="标准服务"><span style={{color:'red'}}>{record?.priceStandard??'-'}</span></Descriptions.Item>
              <Descriptions.Item label="高级服务"><span style={{color:'red'}}>{record?.priceAdvanced??'-'}</span></Descriptions.Item>
              <Descriptions.Item label="收藏数量" span={24}>{record?.focusNum}</Descriptions.Item>
              <Descriptions.Item label="主页头图" span={24}>{record?.avatarUrl ?
                <Avatar size='large' shape='square' src={record?.avatarUrl}/> : '-'}</Descriptions.Item>
              <Descriptions.Item span={24} label="主页详情图">{record?.backgroundUrl ? <Image src={record?.backgroundUrl} /> : '-'}</Descriptions.Item>
              {/*<Descriptions.Item span={24} label="主页详情图">{record?.backgroundUrl ? <a onClick={()=>{
                setCurrentRow(record)
                setPreview(true)
              }}>查看</a> : '-'}</Descriptions.Item>*/}
            </Descriptions>
          </Tabs.TabPane>
        </Tabs>
      </Card>
    </PageContainer>
  );
};

export default WorkDetail;
